﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>颜色选择器</title>
<script>
String.prototype.getquerystring = function(name){var reg = new RegExp("(^|&|\\?)"+ name +"=([^&]*)(&|$)","i"),r; if (r=this.match(reg)){return r[2]; }return null; };

var parid=document.location.href.getquerystring("id");
var parobj=parent.document.getElementById(parid);
var spanobj=parent.document.getElementById("span_" + parid);
var defcolor=parobj.value;//getAttribute
if(defcolor.length!=7){defcolor="#000000";};
var ColorHex=new Array('00','33','66','99','CC','FF');
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
var current=null;
function intocolor()
{
	var colorTable='';
	for (i=0;i<2;i++)
	{
  		for (j=0;j<6;j++)
   		{
    		colorTable=colorTable+'<tr height="12">';
    		colorTable=colorTable+'<td width="11" bgcolor="#000000">';    
    		if (i==0){colorTable=colorTable+'<td width="11" bgcolor="#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">';} 
    		else{colorTable=colorTable+'<td width="11" bgcolor="#'+SpColorHex[j]+'">';}
			colorTable=colorTable+'<td width="11" bgcolor="#000000">';
    		for (k=0;k<3;k++)
     		{
       			for (l=0;l<6;l++)
       			{
        			colorTable=colorTable+'<td width="11" bgcolor="#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">';
				}
			}
		}
	}
	colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
    +'<tr height=30><td colspan=21 bgcolor=#cccccc>'
    +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
    +'<tr><td width="3"><td><input type="text" id="DisColor" name="DisColor" size="6" style="border:solid 1px #000000;background-color:' + defcolor + ';"></td>'
    +'<td width="3"><td><input type="text" id="HexColor" name="HexColor" size="7" maxlength="7" style="border:inset 1px;font-family:Arial;" value="' + defcolor + '" onkeyup="setColor(event);"></td></tr></table></td></table>'
    +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver(event);" onmouseout="doOut(event)" onclick="doclick(event)" style="cursor:pointer;">'
    +colorTable+'</table>'; 
	//colorTable = colorTable +'<br><center><input type="button" name="" value="关&nbsp;闭" class="button" onClick="window.close();"></center>';        
	colorpanel.innerHTML=colorTable;
};
function setColor(event)
{
	event =event || window.event;
	var src=event .srcElement||event.target;
	current=null;
	DisColor.style.backgroundColor =src.value;
	//parent.layer.close(parent.arrLayerIndex.pop());
	//alert(parobj);
};
function doOver(event) 
{
	event =event || window.event;
	var src=event .srcElement||event.target;  
      if ((src.tagName=="TD") && (current!=src)) 
	  {
        if (current!=null){current.bgColor= current._background;}     
        src._background =src.bgColor;		
        DisColor.style.backgroundColor =src.bgColor;
        HexColor.value = src.bgColor;
        current = src;
      }
};

function doOut(event) 
{
	event =event || window.event;
	var src=event .srcElement||event.target;  
    if (current!=null) {current.style.backgroundColor = current._background;}
}

function doclick(event){

	event =event || window.event;
	var src=event .srcElement||event.target;  
	if (src.tagName=="TD")
	{
		//alert(typeof(parobj.blur));
		parobj.value=src._background;
		spanobj.style.backgroundColor=src._background;
		parent.layer.close(parent.arrLayerIndex.pop());
		if(typeof(parobj.blur)=="function")
		{
			parobj.blur();
			parobj.onblur();
		}			
		
		
		return src._background;
	}
};
</script>
<style>
input{-webkit-appearance: none;-moz-appearance:none;-o-appearance:none;appearance: none;
border-radius: 0;}
</style>
</head>
<body onLoad="intocolor()">
<div id="colorpanel" style="position: absolute;"></div>
</body>
</html>






